<template>
<el-container>
    <el-header>
       <el-container justify="start">
        <el-col :offset="5" :span="13">
          <span>{{ title }}</span>
        </el-col>
        <el-col :span="6"><span v-if="logined">当前用户: {{ loginer.name }} </span>
          <el-button style="padding:10px;margin-left: 1em; display:inline-block;border-color:#f00;" @click="this.logout">退出/logout</el-button>
          <span v-if="!logined">未登录</span>
        </el-col>
       </el-container>
    </el-header>
  <el-container>
    <el-aside width="200px">
      <Menu></Menu>
    </el-aside>
    <el-main>
      <slot></slot>
    </el-main>
  </el-container>
</el-container>

</template>
<style scoped lang="less">
.el-container {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-footer {
  line-height: 60px;
}

.el-aside {
  background-color: rgba(201, 197, 203, 0.55);
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 160px;

}
</style>

<script>

import {toRefs} from 'vue'
import Menu from './menu.vue';

export default {

  name: 'main-frame',
  data() {
    return {
      loginer: {},
      logined: false
    }
  },
  props: {
    title: String,
    menu: []
  },
  setup: function (props, context) {
    //如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：
    const {title} = toRefs(props)
    console.log(title);
    return {title: title.value}
  },

  mounted() {
    var loginJson = sessionStorage.loginedUser;
    if (loginJson == null) {
      this.logined=false;
      this.loginer=null;

    } else {

      this.logined=true;
      this.loginer=JSON.parse(loginJson);


    }
  },

  methods: {
    logout() {
      sessionStorage.removeItem("loginedUser");
      this.logined=false;
      this.loginedUser=null;
      this.$router.push("/login");
    }
  },
  components: {
    Menu
  }
}
</script>